<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '修改账号' : '修改账号'" append-to-body width="450px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">

            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" show-password auto-complete="on"  style="width: 250px;" placeholder="请输入原始密码"  maxlength="18" clearable/>
            </el-form-item>

            <el-form-item label="账号" prop="newUserId">
                <el-input v-model="form.newUserId" style="width: 250px;" placeholder="请输入新账号"  maxlength="20" clearable/>
            </el-form-item>
  
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editUserId } from '@/api/request'
import { validateUserId } from '@/utils/validate'

export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
    },
    data() {
        const validateuserId = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('用户账号不能为空'))
            } 
            if (!validateUserId(value)) {
                callback(new Error('以字母开头,只能输入数字、字母、下划线'))
            } 
            else {
                callback()
            }
        };
        return {
            show:true,
            disabled:true,
            loading: false, dialog: false, permissions: [],
            form: {password:'',newUserId:''},
            rules: {
                password:[
                    { required: true, trigger: 'blur',message: '请输入原始密码',},
                    {
                        min: 6,
                        max: 18,
                        message: '原始密码长度在6到18位',
                        trigger: 'blur',
                    },
                ],
                newUserId: [
                    { required: true, trigger: 'blur',validator: validateuserId,},
                    {
                        min: 4,
                        max: 20,
                        message: '账号长度在4到20位',
                        trigger: 'blur',
                    },
                ],

            },
           
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit(){
            this.form.newUserId = this.form.newUserId.trim()
            this.$refs['form'].validate((valid) => {
                if (valid){
                    editUserId(this.form).then(res => { 
                        this.$notify({
                            title: '修改成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }
                
            })            
        },
    }
}
</script>

<style scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
</style>
